<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科:" prop="subjectID">
          <el-select
            v-model="ruleForm.subjectID"
            placeholder="请选择"
            @change="subjectChangeFn"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目录:" prop="catalogID">
          <el-select v-model="ruleForm.catalogID" placeholder="请选择">
            <el-option
              v-for="item in catalogList"
              :key="item.id"
              :label="item.directoryName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="企业:" prop="enterpriseID">
          <el-select v-model="ruleForm.enterpriseID" placeholder="请选择">
            <el-option
              v-for="item in enterpriseList"
              :key="item.id"
              :label="item.company"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" prop="province">
          <template #default>
            <el-select
              v-model="ruleForm.province"
              style="width: 50%"
              placeholder="请选择"
              @change="cityChangeFn"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
            <el-select
              v-model="ruleForm.city"
              style="width: 50%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="方向:" prop="direction">
          <el-select v-model="ruleForm.direction" placeholder="请选择">
            <el-option
              v-for="item in directionList"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="题型:" prop="questionType">
          <el-radio-group v-model="ruleForm.questionType">
            <el-radio
              v-for="item in questionType"
              :key="item.id"
              :value="item.id"
              :label="item.id"
            >
              {{ item.label }}
            </el-radio>
            <!-- <el-radio label="单选" />
            <el-radio label="多选" />
            <el-radio label="简答" /> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:" prop="difficulty">
          <el-radio-group v-model="ruleForm.difficulty">
            <el-radio
              v-for="item in difficultyList"
              :key="item.id"
              :value="item.id"
              :label="item.id"
            >
              {{ item.label }}
            </el-radio>
            <!-- <el-radio label="简单" />
            <el-radio label="一般" />
            <el-radio label="困难" /> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干:" prop="question">
          <editor v-model="ruleForm.question" :min-height="192" />
        </el-form-item>
        <el-form-item label="选项:" :class="{ showCheck: showCheck }">
          <el-row :gutter="10">
            <checkbox ref="checkInput">
              <template #radio>
                <el-radio-group v-model="radioOption">
                  <el-row v-for="(item, index) in checkInputList2" :key="index">
                    <el-col :span="18" style="margin-top: 10px">
                      <el-radio :label="`${item.code}`" />
                      <el-input v-model="item.title" style="width: 80%" />
                    </el-col>
                    <el-col :span="6"><uploadBtn /></el-col>
                  </el-row>
                </el-radio-group>
              </template>
              <template #checkbox>
                <el-checkbox-group v-model="checkboxOptionList">
                  <el-row v-for="(item, index) in checkInputList2" :key="index">
                    <el-col :span="18" style="margin-top: 10px">
                      <el-checkbox :label="`${item.code}`" name="options" />
                      <el-input v-model="item.title" style="width: 90%" />
                    </el-col>
                    <el-col :span="5"><uploadBtn /></el-col>
                  </el-row>
                </el-checkbox-group>
              </template>
            </checkbox>
          </el-row>
          <el-row :gutter="10">
            <el-button
              type="danger"
              :disabled="disabledBtn"
              @click="addCheckInput"
            >
              +增加选项与答案
            </el-button>
          </el-row>
        </el-form-item>
        <el-form-item label="解析视频：">
          <el-input v-model="ruleForm.videoURL" />
        </el-form-item>
        <el-form-item label="答案解析:" prop="answer">
          <editor v-model="ruleForm.answer" :min-height="192" />
        </el-form-item>
        <el-form-item label="题目备注：">
          <el-input v-model="ruleForm.remarks" type="textarea" />
        </el-form-item>
        <el-form-item label="试题标签：">
          <el-select
            v-model="ruleForm.tags"
            :multiple="false"
            filterable
            allow-create
            default-first-option
            placeholder="请选择"
          >
            <el-option
              v-for="item in tagList"
              :key="item.id"
              :label="item.tagName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">
            确认提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import uploadBtn from '@/components/uploadBtn/index.vue'
import checkbox from './components/checkbox.vue'
import {
  addBaseBankApi,
  getBaseQueBankInfoApi,
  getDirectoryListApi,
  getSubjectListApi,
  getTagListApi,
  updateQueInfoApi
} from '@/api/queBank'
import Const from '@/const/const'
import { getCompanyListApi } from '@/api/company'

export default {
  components: {
    uploadBtn,
    checkbox
  },
  data() {
    // const cityPropValid = (rule, value, callback) => {
    //   console.log(value)
    //   if (!value) {
    //     callback(new Error('请选则城市'))
    //   }
    // }
    return {
      ruleForm: {
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 企业
        enterpriseID: '',
        // 城市
        province: '',
        // 区
        city: '',
        // 方向
        direction: '',
        // 试题类型
        questionType: '单选',
        // 难度
        difficulty: '简单',
        // 题干
        question: '',
        // 选项
        options: [],
        // 视频解析
        videoURL: '',
        // 答案解析
        answer: '',
        // 备注
        remarks: '',
        // 标签
        tags: ''
      },
      rules: {
        subjectID: [{ required: true, message: '请输入', trigger: 'blur' }],

        catalogID: [{ required: true, message: '请输入', trigger: 'blur' }],

        enterpriseID: [{ required: true, message: '请输入', trigger: 'blur' }],

        province: [
          { required: true, message: '请输入', trigger: 'blur' }
          // {
          //   validtor: cityPropValid,
          //   message: '请输入',
          //   trigger: ['blur', 'change']
          // }
        ],

        direction: [{ required: true, message: '请输入', trigger: 'blur' }],

        questionType: [{ required: true, message: '请输入', trigger: 'blur' }],

        difficulty: [{ required: true, message: '请输入', trigger: 'blur' }],
        question: [{ required: true, message: '请输入', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      // 单选--正确选项
      radioOption: '',
      // 多选列表--正确选项
      checkboxOptionList: [],
      // ？？？
      checkboxname: '',
      // 学科列表
      subjectList: [],
      // 目录列表
      catalogList: [],
      // 地区列表
      cityList: [],
      // 城市列表
      provinceList: [
        {
          id: 0,
          label: '北京'
        },
        {
          id: 1,
          label: '上海'
        },
        {
          id: 2,
          label: '济南'
        },
        {
          id: 3,
          label: '西川'
        }
      ],
      // 企业列表
      enterpriseList: [],
      // 方向列表
      directionList: [
        {
          id: 1,
          label: 'o2o'
        },
        {
          id: 2,
          label: '外包服务'
        },
        {
          id: 3,
          label: '企业服务'
        },
        {
          id: 4,
          label: '互联网金融'
        },
        {
          id: 5,
          label: '企业咨询'
        },
        {
          id: 6,
          label: '互联网'
        },
        {
          id: 7,
          label: '电子商务'
        },
        {
          id: 8,
          label: '其它'
        }
      ],
      // 标签列表
      tagList: [],
      // 难度类型
      difficultyList: [
        {
          id: '1',
          label: '简单'
        },
        {
          id: '2',
          label: '一般'
        },
        {
          id: '3',
          label: '困难'
        }
      ],
      // 试题类型
      questionType: [
        {
          id: '1',
          label: '单选'
        },
        {
          id: '2',
          label: '多选'
        },
        {
          id: '3',
          label: '简答'
        }
      ],
      // 选项的动态class
      showCheck: false,
      // 按钮的动态class
      disabledBtn: true,
      // 选项列表
      checkInputList: ['A', 'B', 'C', 'D'],
      // 选项列表2
      checkInputList2: [
        { isRight: false, code: 'A', title: '', img: '' },

        { isRight: false, code: 'B', title: '', img: '' },

        { isRight: false, code: 'C', title: '', img: '' },

        { isRight: false, code: 'D', title: '', img: '' }
      ]
    }
  },
  watch: {
    'ruleForm.questionType': function (newval, oldval) {
      if (newval === '1') {
        this.$refs.checkInput.checkboxname = 'radio'
        this.showCheck = false
        this.disabledBtn = true
        this.checkboxOptionList = []
      } else if (newval === '2') {
        this.$refs.checkInput.checkboxname = 'checkbox'
        this.showCheck = false
        this.disabledBtn = false
        this.radioOption = ''
      } else {
        this.showCheck = true
        this.disabledBtn = false
      }
    }
  },
  created() {
    this.getSubjectList()
    this.getCompanyList()
    if (this.$route.query.id) {
      this.getQueInfo()
    }
  },
  methods: {
    // 当城市的值改变时-我们给地区列表赋值
    cityChangeFn(val) {
      console.log(val)
      if (val) {
        this.cityList = Const.cityList
      }
    },
    // 点击确认提交按钮
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 缺少options
          // console.log(this.ruleForm)
          // 选项列表
          // console.log(this.checkInputList2)
          // 单选的正确选项
          // console.log(this.radioOption)
          // 多选的正确选项列表
          // console.log(this.checkboxOptionList)

          if (this.radioOption) {
            this.checkInputList2.forEach((item) => {
              if (item.code === this.radioOption) {
                item.isRight = true
                return
              }
            })
          } else {
            this.checkInputList2.forEach((item) => {
              this.checkboxOptionList.forEach((it) => {
                if (item.code === it) {
                  item.isRight = true
                }
              })
            })
          }
          this.ruleForm.options = this.checkInputList2
          // console.log(this.ruleForm)
          if (!this.ruleForm.addDate) {
            await addBaseBankApi(this.ruleForm)
            this.$message.success('添加成功')
          } else {
            await updateQueInfoApi(this.ruleForm)
            this.$message.success('修改成功')
          }
          this.$router.back()
          // this.$router.push('/questions/list')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取学科列表
    async getSubjectList() {
      const res = await getSubjectListApi()
      // console.log(res)
      this.subjectList = res.data
      // this.$store.dispatch('queBank/getSubjectList', res.data)
    },
    // 学科改变时触发的操作-获取目录列表和标签列表
    subjectChangeFn(val) {
      this.getDirectoryList(val)
      this.getTagList(val)
    },
    // 获取目录列表
    async getDirectoryList(val) {
      const res = await getDirectoryListApi(val)
      // console.log(res)
      this.catalogList = res.data.items
      // this.$store.dispatch('queBank/getDirectoryList', res.data.items)
    },
    // 获取标签列表
    async getTagList(val) {
      const res = await getTagListApi(val)
      // console.log(res)
      this.tagList = res.data.items
    },
    // 获取企业数据列表
    async getCompanyList() {
      this.loading = true
      const obj = {
        page: 1,
        pagesize: 99999
      }
      const res = await getCompanyListApi(obj)
      // console.log(res)
      this.enterpriseList = res.data.items
    },
    // 添加选项框
    addCheckInput() {
      // 输出A-Z 26个大写字母
      // for (var i = 0; i < 26; i++) {
      //   console.log(String.fromCharCode(65 + i))
      // }
      const str = String.fromCharCode(65 + this.checkInputList2.length)
      const obj = { isRight: false, code: `${str}`, title: '', img: '' }
      this.checkInputList2.push(obj)
    },
    // 用于数据回显的方法--获得试题数据详情
    async getQueInfo() {
      const id = this.$route.query
      // console.log(id.id)
      const res = await getBaseQueBankInfoApi(id.id)
      this.ruleForm = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.showCheck {
  display: none;
}

::v-deep .el-textarea__inner {
  height: 100px;
}
::v-deep .el-card__body {
  width: 70%;
  margin: 0 auto;
}
::v-deep .el-row {
  margin: 10px 0;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.el-radio-group {
  width: 100%;
}
</style>
